<template>
  <div class="main">
    <div>
      <div>
        <el-button type="primary" plain icon="el-icon-plus">添加</el-button>
      </div>
      <div v-if="dataList.length<=0">
        <el-empty description="抱歉，没有数据哦"></el-empty>
      </div>
      <el-table
        :data="dataList"
        max-height="450"
        v-else
        style="width: 100%">
        <el-table-column
          prop="id"
          label="编号"
          fixed
          width="100">
        </el-table-column>
        <el-table-column
          prop="username"
          label="账号"
          width="140">
        </el-table-column>
        <el-table-column
          width="100"
          align="center"
          label="权限等级">
          <template slot-scope="scope">
            <div>
              {{ getGrade(scope.row.arole.roleGrade) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="arole.roleName"
          width="220"
          label="权限名称">
        </el-table-column>

        <el-table-column
          label="角色状态">
          <template slot-scope="scope">
              <el-tag :type="scope.row.arole.status===0?'success':'danger'">
                {{ scope.row.arole.status===0?'正常':'禁用' }}
              </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="账号状态">
          <template slot-scope="scope">
              <el-tag :type="scope.row.isDelete===0?'success':'danger'" effect="plain">
                {{ scope.row.isDelete===0?'正常':'禁用' }}
              </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          width="270"
          fixed="right"
          label="操作">
          <template slot-scope="scope">
              <el-button type="warning" icon="el-icon-circle-close" @click="disable(scope.row.id)">
                {{ scope.row.isDelete===0?'禁用':'解禁' }}
              </el-button>
              <el-button type="danger" icon="el-icon-delete">删除</el-button>
              <el-button type="primary" icon="el-icon-edit-outline">修改</el-button>
          </template>
        </el-table-column>
    </el-table>
    </div>
  </div>
</template>

<script>
import common from '@/util/common';
import request from '@/util/request';
export default {
    props:{
        dataList:{
            type:Array,
            required:true,
            default:()=>[]
        }
    },
    methods:{
        getDate(date){
            console.log(date);
            
            return common.formatDate(date)
        },
        getGrade(grade){
          const chineseNumbers = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
          const result = chineseNumbers[grade]
          if(result==='零'){
            return '最高级'
          }
          return result
        },
        disable(id){
          request.get(`/admin/disable?id=${id}`).then((res) => {
            this.$notify.success('操作成功')
            this.$emit('refresh')
          })
          .catch(err =>{
            if (err.response) {
                this.$notify.error(err.message)
            } else {
                this.$notify.error('网络错误')
            }
          })
        }
    }
}
</script>

<style lang="scss" scoped>
.main{
    padding: 10px;
    width: 100%;
}
</style>